<template>
	<view class="order_confirm">
		<view class="confirm_bg">
			
		</view>
		<view class="content_notcie">
			<tm-alerts  label="贴心提示! 阅读安心用车政策"  color='white'></tm-alerts>
		</view>
		<view class="content_middle">
			<OrderContent :data="data"></OrderContent>
		</view>
		<view class="content_security" >
			<SecurityCar  @getprice='hq'></SecurityCar>
		</view>
		
		<view class="content_service">
		<view class="add_service">
				<view class="add_title">
					增值服务
				</view>
			<view class="add_content"    >
					<view class="one">
						免除代加油服务费 
						<tm-helpTips ment-direction="right" tip-direction="right" direction='top' label="工作人员将替您加油并收取费用">
							<tm-icons name="icon-question-circle"></tm-icons>
						</tm-helpTips><br/>
						<tm-tags color="bg-gradient-orange-accent" size="s" >限时优惠</tm-tags>
					</view>
					<view class="two">
						<slot>
						<span>￥</span>{{price}} <tm-checkbox  v-model="one"  name='25' :size='20' @change='changeRadio'></tm-checkbox>
						</slot>
					</view>
				</view>
			<view class="add_content" >
					<view class="one">
						延时还车抵扣费
						<tm-helpTips ment-direction="right" tip-direction="right" direction='top' label="工作人员将替您加油并收取费用">
							<tm-icons name="icon-question-circle"></tm-icons>
						</tm-helpTips><br/>
						<tm-tags color="bg-gradient-orange-accent" size="s" >限时优惠</tm-tags>
					</view>
					<view class="two">
						<slot>
						<span>￥</span>{{price2}} <tm-checkbox  v-model="two" name='16'  :size='20' @change='changeRadio2'></tm-checkbox>
						</slot>
					</view>
				</view>
		</view> 
		</view>
			<tm-actionSheet @change="change" v-model="show">
				<view class="detail_one">
					<span>车辆租赁费用以及门店服务费(现价付)</span>
					<text>￥{{base*days}}/{{days}}天 </text>
				</view>
				<view class="detail_one">
					<span>基本保障服务费</span>
					<text>￥{{service}}</text>
				</view>
				<view class="detail_one">
					<span>手续费(现价付)</span>
					<text>￥{{hand}}</text>
				</view>
				<tm-divider  ></tm-divider>
				<view class="detail_two">
					<span>车辆保证金（可退）￥3000</span>
					<view class="price">订单总额 <text>￥{{sum}}</text></view>
				</view>
				<view class="detail_one">
					<span>违章押金（可退）￥2000</span>
					<text></text>
				</view>
			</tm-actionSheet>


		<view class="content_more">
			<MoreContent></MoreContent>
		</view>
		
		<view class="content_rules">
			<RulesContent></RulesContent>
		</view>
		
		<view class="content_bottom">
			<view class="bottom_banner">
					<tm-icons :size="25" name="icon-flag"></tm-icons>
					<span>取车前可免费取消，无惧计划有变！</span>
			</view>
			<view class="one">
				总价 <span>￥ <text>{{sum}}</text></span>
			</view>
			<view class="two">
				<span @click='changeshow()'> 费用明细</span>
				<tm-button size='m' :round='10' theme="bg-gradient-orange-accent" @click='sendOrder(data)'>提交订单</tm-button>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderContent from "../../compoments/OrderContent.vue"
	import SecurityCar from "../../compoments/SecurityCar.vue"
	import AddService from "../../compoments/AddService.vue"
	import MoreContent from "../../compoments/MoreContent.vue"
	import RulesContent from '../../compoments/RulesContent.vue'
	export default {
		components:{
			OrderContent,SecurityCar,AddService,MoreContent,RulesContent
		},

		onLoad(ref) {
			let obj = uni.getStorageSync('chonsePlace')
			this.days =obj.days*1
         setTimeout(()=>{
			 this.getcar(ref.carid)
		 },0)
		},
		data() {
			return {
				show:false,
				banner:true,
				data:[],
				service:100,
				hand:80,
				base:'',
				sum:'',
				price:25,
				price2:16,
				one:false,
				two:false,
				days:''
			}
		},
		methods: {
			async sendOrder(data){
				let carid = data[0].AC001
				let obj = uni.getStorageSync('chonsePlace')
				// console.log('提交订单',data)
				const Rres = await  this.$wxRequest({
					url:'/wx/send_order',
					method:'POST',
					data:{
						AC001:carid,
						AO002:obj.address,
						AO003:obj.edate,
						AO008:obj.etime,
						AO004:obj.address,
						AO005:obj.sdate,
						AO009:obj.stime,
						AO006:this.service,
						AO007:'1',
						AO011:this.days,
						AO012:this.sum
						}
				})
				console.log('ordr',Rres)
				if(Rres.data.code == 200){
					uni.navigateTo({
						url:`/pages/payorder/payorder?orderid=${Rres.data.orderid}&price=${this.sum}`
					})
				}
			},
			
			hq(data){
				this.service = data
			},
			changeRadio(e){
				// if(e.checked){
				// 	this.sum=this.sum+(this.price)
					
				// }else{
				// 	this.sum=this.sum-(this.price)
				// }
			},
			changeRadio2(e){
			// if(e.checked){
			// 	this.sum=this.sum+(this.price2)
			// }else{
			// 	this.sum=this.sum-(this.price2)
			// 	}
			},
			changeshow(){
				this.show=true
			},
			async getcar(id){
				const Rres = await  this.$wxRequest({
					url:'/wx/carid_search',
					method:'POST',
					data:{
						carid:id
						}
				})
				console.log(Rres)
				if(Rres.data.code == 200){
					this.data = Rres.data.data
					this.base =this.data[0].AC006
				}
				
			}
		},
		computed:{
			total(){
				if(this.one){
					this.sum = (this.base*1*this.days) + (this.hand*1) + (this.service*1)+(this.price*1)
				}else if(this.two) {
					this.sum = (this.base*1*this.days) + (this.hand*1) + (this.service*1)+(this.price2*1)
				}else if(this.one && this.two){
					this.sum = (this.base*1*this.days) + (this.hand*1) + (this.service*1)+(this.price2)+(this.price*1)
				}else{
					this.sum = (this.base*1*this.days) + (this.hand*1) + (this.service*1)
				}
				
				return (this.base*1*this.days) + (this.hand*1) + (this.service*1)
			}
		},

	}
</script>

<style lang="scss" scoped>
.order_confirm{
	.confirm_bg{
		width: 100%;
		height: 400rpx;
		background-color: #5bb5b6;
		// position: absolute;
	}
	.content_notcie{
		 position: relative;
		 top: -390rpx;
	}
	.content_middle{
		position: relative;
		top: -370rpx;
		width: 90%;
		margin: auto;
	
	}
	.content_security{
		position: relative;
		top: -350rpx;
	}
	.content_service{
		position: relative;
		top: -330rpx;
		.add_service{
			width: 90%;
			height: 100%;
			margin: auto;
			box-sizing: border-box;
			border-radius: 30rpx;
			background-color: #ffffff;
			padding: 20rpx;
			.add_title{
				
			}
			.add_content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.one{
					
				}
				.two{
					
				}
			}
		}
	}
	.content_more{
		position: relative;
		top: -310rpx;
	}
	.content_rules{
		position: relative;
		top: -290rpx;
	}
	.detail_one{

		display: flex;
		justify-content: space-between;
		color: #656565;
		font-size: 26rpx;
		line-height: 65rpx;
	}
	.detail_two{
		display: flex;
		justify-content: space-between;
		line-height: 65rpx;
		color: #656565;
		font-size: 26rpx;
        .price{
			text{
				font-size: 28rpx;
				color:  #d78b3d;
				font-weight: 600;
			}
		}
		
	}


	.content_bottom{
	.bottom_banner{
		background-color: #e1edfb;
		position: absolute;
		bottom: 84rpx;
		 width: 100%;
		padding-left: 20rpx;
		span{
			 padding: 0 20rpx;
			color: #689bdc;
			font-size: 20rpx;
		}
	} 
 width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		background-color: #Ffffff;
		.one{
			width: 50%;
			margin-left: 50rpx;
			color: #919191;
			span{
				color: orange;
				font-size: 20rpx;
				text{
					font-weight: 600;
					
				}
			}
		}
		.two{
			width: 50%;
			margin-left: 90rpx;
			span{
				color: #7cb3b2;
				font-size: 24rpx;
			}
		}
	}
}
</style>
